<template>
  <div class="basemap">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();

    let center = [30.299539, 107.820952];
    let radius = 0.03;
    let startAngle = 0;
    let endAngle = 90;
    let pointNum = 50;

    // let shanxingPoi = this.drawShanxing(
    //   center,
    //   radius,
    //   startAngle,
    //   endAngle,
    //   pointNum
    // );
    let shanxingPoi = this.generatePolarPoints(
      center,
      radius,
      startAngle,
      endAngle,
      pointNum
    );
    // 中心
    let circle = this.drawCircle(center, 100);
    this.map.addLayer(circle);

    // 半径
    let line1 = this.getLine(center, radius, 0);
    this.map.addLayer(line1);

    // 半径
    let line2 = this.getLine(center, radius, 90);
    this.map.addLayer(line2);

    // 绘制且添加
    let polyline = this.$L
      .polyline(shanxingPoi, { color: "red" })
      .addTo(this.map);
    // 跳到线的范围
    this.map.fitBounds(polyline.getBounds());
  },
  methods: {
    initMap() {
      // 重庆市经纬度 107.820952,29.839539
      // const cqp = this.$L.latLng(29.5647398, 106.5478767);
      const cqp = this.$L.latLng(30.299539, 107.820952);

      this.map = this.$L
        .map("map", {
          // 版权控件
          attributionControl: false,
          // 缩放控件
          zoomControl: false,
        })
        .setView(cqp, 7);

      // 天地图token
      const tdtToken = "810e2cf8deac0489c6bb8ee29e5d9591";
      // 天地图 影像底图
      const wmtsImg =
        "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
        tdtToken;

      this.$L
        .tileLayer(wmtsImg, {
          maxZoom: 18,
        })
        .addTo(this.map);
    },
    // 绘制扇形 返回点数组
    drawShanxing(center, radius, startAngle, endAngle, pointNum) {
      let points = [];
      points.push(center);
      for (let i = 0; i < pointNum; i++) {
        let angle = startAngle + ((endAngle - startAngle) * i) / pointNum;
        let sin = Math.sin((angle * Math.PI) / 180);
        let cos = Math.cos((angle * Math.PI) / 180);
        let x = center[1] + radius * sin;
        let y = center[0] + radius * cos;
        points.push([y, x]);
      }
      points.push(center);

      let point = points;

      return point;
    },
    // 画圆
    drawCircle(center, radius) {
      return this.$L.circle(center, radius, {
        color: "red",
        fillColor: "red",
        fillOpacity: 0.5,
      });
    },
    // 画线 一点 长度 角度
    getLine(center, length, dirction) {
      // 将角度转换为弧度
      dirction = (dirction * Math.PI) / 180; // 如果角度是以度数给出，则转换为弧度

      // 使用三角函数计算新的坐标
      const newX = center[1] + length * Math.cos(dirction);
      const newY = center[0] + length * Math.sin(dirction);
      let points = [center, [newY, newX]];

      return this.$L.polyline(points, {
        color: "red",
      });
    },
    // 第二种扇形绘制方法 返回点数组
    generatePolarPoints(center, radius, startAngle, endAngle, numPoints) {
      const points = [];

      startAngle = Math.PI * (startAngle / 180);
      endAngle = Math.PI * (endAngle / 180);

      // 计算每个点之间的角度增量
      const angleIncrement = (endAngle - startAngle) / numPoints;

      for (let i = 0; i <= numPoints; i++) {
        const angle = startAngle + i * angleIncrement;
        const x = center[1] + radius * Math.cos(angle);
        const y = center[0] + radius * Math.sin(angle);

        // 将笛卡尔坐标转换为类似经纬度的坐标
        // const latitude = ((y - center[0]) / radius) * 90; // 假设y轴方向对应纬度变化
        // const longitude = ((x - center[1]) / radius) * 180; // 假设x轴方向对应经度变化

        points.push([y, x]);
      }

      return points;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>